<template>
  <div class="mask">
    <div class="mask-bg"></div>
    <transition name="scale">
      <div class="mask-body" v-if="isShow">
        <p class="message">{{message}}</p>
        <div class="btn-group">
          <button class="btn-left" @click="choose(true)">确定</button>
          <button class="btn-right" @click="choose(false)">取消</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "MaskBox",
    props: {
      message: {
        type: String,
        default: "提示"
      }
    },
    data() {
      return {
        isShow: false
      };
    },
    methods:{
      choose(msg){
        this.$emit('choosing',msg)
      },
      show(){
        this.isShow = true;
      },
      hide(){
        this.isShow = false;
      }
    },
    mounted(){
      this.show();
    }
  };
</script>

<style lang="scss" scoped>
  @import "MaskBox.scss";
</style>
